<template>
  <uni-nav-bar title="开具发票" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" style="padding:0px 30rpx;">
    <view class="space-between top">
      <view>发票类型</view>
      <view>增值税电子普通发票</view>
    </view>
    <view class="space-between top">
      <view>抬头类型</view>
      <uni-data-checkbox v-model="state1" :localdata="type1"></uni-data-checkbox>
    </view>
    <view class="space-between top" v-if="state1===0">
      <view>发票抬头</view>
      <input class="uni-input" placeholder="请填写发票抬头" v-model="title" />
    </view>
    <view class="space-between top" v-if="state1===0">
      <view>税号</view>
      <input class="uni-input" placeholder="请填写税号" v-model="code" />
    </view>
    <view class="space-between top" v-if="state1===1">
      <view>户名</view>
      <input class="uni-input" placeholder="请填写户名" v-model="name" />
    </view>
    <view class="space-between top">
      <view>开户银行</view>
      <input class="uni-input" placeholder="请填写开户银行" v-model="bank" />
    </view>
    <view class="space-between top">
      <view>银行账号</view>
      <input class="uni-input" placeholder="请填写银行账号" v-model="bank_code" />
    </view>
    <view class="space-between top" v-if="state1===0">
      <view>企业地址</view>
      <input class="uni-input" placeholder="请填写企业地址（选填）" v-model="address" />
    </view>
    <view class="space-between top">
      <view>电话</view>
      <input class="uni-input" placeholder="请填写电话（选填）" v-model="mobile" />
    </view>
    <view class="space-between top">
      <view>邮箱</view>
      <input class="uni-input" placeholder="请填写邮箱（选填）" v-model="email" />
    </view>
  </view>
  <view class="but" @click="submit()">提交申请</view>
  <view style="width:100%;height:1px;"></view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { errorToast, successToast, showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  /**
   * 车队充值开具发票
   * @param {Number} state1 开具发票身份0企业 1个人
   * @param {Array} type1 开具发票身份列表
   * @param {String} title 发票抬头
   * @param {String} code 税号
   * @param {String} bank 开户银行
   * @param {String} bank_code 银行账号
   * @param {String} mobile 电话
   * @param {String} email 邮箱
   * @param {String} address 企业地址
   * @param {String} name 户名
   * @param {String} order_id 充值订单ID
   * @param {String} type 修改开具发票身份类型
   */
  const state1 = ref(0)
  const type1 = [{ text: '个人', value: 1 }, { text: '企业', value: 0 }]
  const title = ref('') //发票抬头
  const code = ref('') //税号
  const bank = ref('') //开户银行
  const bank_code = ref('') //银行账号
  const mobile = ref('') //电话
  const email = ref('') //邮箱
  const address = ref('')//企业地址
  const name = ref('')//户名
  const order_id = ref('')
  const type = ref('')
  onLoad((pearm) => {
    order_id.value = pearm.id
    type.value = pearm.type
    if (type.value) {
      state1.value = userInfo.invoiceAll.type === 'company' ? 0 : 1
      title.value = userInfo.invoiceAll.title
      code.value = userInfo.invoiceAll.code
      bank.value = userInfo.invoiceAll.bank
      bank_code.value = userInfo.invoiceAll.bank_code
      mobile.value = userInfo.invoiceAll.mobile
      email.value = userInfo.invoiceAll.email
      address.value = userInfo.invoiceAll.address
      name.value = userInfo.invoiceAll.name
    }
  })
  function submit() {
    if (state1.value === 0) {
      if (!title.value || !code.value) {
        errorToast('请完成发票信息')
        return
      }
    } else {
      if (!name.value) {
        errorToast('请完成发票信息')
        return
      }
    }
    if (!bank.value) {
      errorToast('请填写开户银行')
      return
    }
    if (!bank_code.value) {
      errorToast('请填写银行账号')
      return
    }
    submit_s()
  }
  /**
   * 提交车队充值开具发票
   * @param {Array} type1 开具发票身份列表
   * @param {String} title 发票抬头
   * @param {String} code 税号
   * @param {String} bank 开户银行
   * @param {String} bank_code 银行账号
   * @param {String} mobile 电话
   * @param {String} email 邮箱
   * @param {String} address 企业地址
   * @param {String} name 户名
   * @param {String} order_id 充值订单ID
   * @param {String} type 开具发票身份类型
   */
  function submit_s() {
    showLoading()
    var payload = {
      type: state1.value === 0 ? 'company' : 'person',
      title: state1.value === 0 ? title.value : '',
      code: state1.value === 0 ? code.value : '',
      bank: bank.value,
      bank_code: bank_code.value,
      address: state1.value === 0 ? address.value : '',
      name: state1.value === 0 ? '' : name.value,
      email: email.value,
      mobile: mobile.value,
    };
    if (type.value) {
      payload.id = Number(order_id.value)
    } else {
      payload.order_id = Number(order_id.value)
    }
    const topic = type.value ? 'driver/editInvoice' : "driver/addInvoice"
    toPublish(topic,
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          navBack()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .top:nth-last-of-type(1) {
    border-bottom: 0px;
  }

  .top {
    // margin-top: 20rpx;
    padding: 35rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;

    input {
      text-align: right;
    }
  }

  .but {
    width: 96%;
    margin: 60rpx auto 20rpx;
    background-color: #1F93FF;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    height: 91rpx;
    line-height: 91rpx;
  }
</style>
<style>
  .top>>>.uni-data-checklist .checklist-group {
    justify-content: flex-end;
  }

  .top>>>.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
    font-size: 28rpx;
    color: #333 !important;
  }

  .top>>>.checklist-box:nth-last-of-type(1) {
    margin-right: 0px;
  }
</style>